<template>
  <el-card>
    <div class="page-header">
      <!-- 左侧：如果v-if加给了外层class='left'盒子，销毁就变成了一个盒子 -->
      <div class="left">
        <!--
          注意：
            1.当前组件左右标签结构都不确定，所以用插槽技术解决
              因为有两处不确定，需要给slot取名（添加name属性来区分）
            2.左右内容不一定有需要显示，只有使用组件的时候，
              给left和right插槽分发了标签，才需要展示内容，这里借助了$slot 和 v-if 指令配合做条件渲染
              ！！！知识点：$slot可以获取到组件所有的插槽内容
            3.v-if不能加给类名为left 和 right 的div上，这样会破坏左右布局，影响排版
         -->
        <!-- 如果传递了left插槽，则展示 -->
        <div v-if="$slots.left" class="content">
          <el-icon name="info" />
          <slot name="left"></slot>
        </div>
      </div>
      <div class="right">
        <!-- 如果传递了right插槽，则展示 -->
        <div v-if="$slots.right" class="content">
          <slot name="right"></slot>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'PageHeader'
}
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  .content {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 2px 5px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 5px;
    .el-icon-info {
      margin-right: 5px;
      color: #409eff;
    }
  }
}
</style>
